<template>
  <el-button type="primary" @click="batchExportExcel">批量导出Excel</el-button>
  <el-button type="success" @click="chooseExportExcel">选择导出Excel</el-button>

  <el-table
      ref="multipleTableRef"
      :data="customerList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="50" />
    <el-table-column label="序号" type="index" width="65px"/>
    <el-table-column property="ownerDO.name" label="负责人"/>
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column property="clueDO.fullName" label="姓名" />
    <el-table-column property="appellationDO.typeValue" label="称呼" />
    <el-table-column property="clueDO.phone" label="手机号" />
    <el-table-column property="clueDO.weixin" label="微信" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="intentionStateDO.typeValue" label="意向状态" />
    <el-table-column property="stateDO.typeValue" label="线索状态" />
    <el-table-column property="sourceDO.typeValue" label="线索来源" />
    <el-table-column property="intentionProductDO.name" label="意向产品" />
    <el-table-column property="clueDO.nextContactTime" label="联系时间" />
    <el-table-column property="address" label="操作" >
      <el-button type="primary" @click="detail">详情</el-button>
    </el-table-column>
  </el-table>

  <el-pagination
      background layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
  >
  </el-pagination>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import axios from "axios";
import {getToken, massageTip} from "../utils/util.js";

export default {
  name: "CustomerView",
  data(){
    return {
      customerList: [{
        ownerDO: {},   // 负责人
        clueDO: {},
        activityDO: {},  // 活动
        appellationDO: {},  // 称呼
        needLoanDO: {},  // 是否需要贷款
        intentionStateDO: {}, // 意向状态
        intentionProductDO: {},  // 意向产品
        stateDO: {},  // 状态
        sourceDO: {}  // 来源
      }],

      pageSize: 0,
      total: 0,

      customerArray: [],
    }
  },

  mounted() {
    this.getData(1)
  },

  methods: {
    handleSelectionChange(selectionDataArray){
      this.customerArray=[];
      selectionDataArray.forEach(data=>{
        let customerId = data.id;
        this.customerArray.push(customerId);
      })
    },

    getData(current){
      doGet('/api/customers',{
        // 当前查询的页数
        current: current
      }).then((resp)=>{
        if (resp.data.code===200){
          this.customerList=resp.data.data.list;
          this.pageSize=resp.data.data.pageSize;
          this.total=resp.data.data.total;
        }
      })
    },
    // 分页函数
    toPage(current){
      this.getData(current)
    },

    // 批量导出客户的Excel
    exportExcel(ids){
      let token = getToken()
      // 向后端发送请求
      let iframe = document.createElement("iframe");

      if (ids){
        iframe.src=axios.defaults.baseURL+"/api/importExcel?Authorization="+token+"&ids="+ids;
      }else {
        iframe.src=axios.defaults.baseURL+"/api/importExcel?Authorization="+token
      }

      // 将下载窗口隐藏
      iframe.style.display="none"
      document.body.appendChild(iframe)
    },

    batchExportExcel(){
      this.exportExcel(null)
    },

    // 选择导出客户数据到Excel
    chooseExportExcel(){
      if (this.customerArray.length<=0){
        massageTip('请选择需要导出的数据','warning')
        return;
      }
      let ids = this.customerArray.join(',');
      this.exportExcel(ids)
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 15px;
}
.el-pagination {
  margin-top: 15px;
}
</style>